<template>
  <div>
    <div id="echarts_2" style="width: 100%; height: 100px" ref="echartsTwo"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echartsTwo",
  data() {
    return {
      alterEleNum: "",
      // 1 直流
      directEleNum: "",
    };
  },
  created() {
    this.getDeviceTypeCount();
  },

  mounted() {},
  methods: {
    echartsTwo() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echartsTwo);
      console.log(this.alterEleNum);
      var option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}  <br/>{c}辆",
        },
        legend: {
          x: "center",
          y: "2%",
          data: ["交流电充电桩", "直流电充电桩"],
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        calculable: true,
        series: [
          {
            name: "车型",
            type: "pie",
            //起始角度，支持范围[0, 360]
            startAngle: 270,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [51, 80],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ["50%", "20%"],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: "area",
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{c}辆",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: this.alterEleNum,
                name: "交流电充电桩",
                itemStyle: {
                  normal: {
                    color: "#33b565",
                  },
                },
              },
              {
                value: this.directEleNum,
                name: "直流电充电桩",
                itemStyle: {
                  normal: {
                    color: "#20cc98",
                  },
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 交流直流电个数
    async getDeviceTypeCount() {
      let result = await this.$API.reqSelectDeviceTypeCount();
      this.alterEleNum = result[0].deviceTypeNums;
      this.directEleNum = result[1].deviceTypeNums;
      this.echartsTwo(); 
    },
  },
};
</script>
